<template>
  <div style="height: 700px">
    <el-page-header @back="$router.back()" content="编辑页面"> </el-page-header>
    <el-row justify="center">
      <h1>旅馆编辑</h1>
    </el-row>
    <el-row justify="center">
      <el-card style="min-height: 400px;"  shadow="never">
        <el-form
            :model="hotelInfo"
            :rules="rules"
            ref="hotelInfo"
            label-width="100px"
            class="demo-ruleForm"
        >
          <el-form-item label="旅馆名称" prop="hotelName">
            <el-input disabled placeholder="请输入旅馆名称" show-word-limit v-model="hotelInfo.hotelName" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="旅馆描述" prop="hotelDescription">
            <el-input placeholder="请输入旅馆描述信息"  autosize  type="textarea" v-model="hotelInfo.hotelDescription" maxlength="500" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="旅馆配图" >
            <template #default="scope">
              <div v-if="hotelInfo.imageList.length>0" v-for="image in hotelInfo.imageList">
                <el-image
                    style="width: 100px; height: 100px"
                    :src="image"
                    fit="contain"
                >
                </el-image>
                <el-button @click="deleteImage" type="text">删除</el-button>
              </div>
            <el-divider/>
            <el-upload
                class="upload-demo"
                ref="upload"
                :action="`${urlUpload}/oss/uploadFile`"
                :before-upload="beforeUpload"
                :file-list="imageList"
                :auto-upload="false"
                list-type="picture"
                multiple
                :limit=1
                :on-exceed="exceed"
                :on-success="submitSuccess"
                :on-error="errorUpload"
                :on-change="change"
            >
              <template  #trigger>
                <el-button size="small" type="primary">选取图片</el-button>
              </template>
              <template #tip>
                <div class="el-upload__tip">只能上传jpg/png/jpeg文件，且不超过1MB,最大数量1张</div>
              </template>
              <el-button
                  style="margin-left: 10px;"
                  size="small"
                  type="success"
                  @click="submitUpload"
              >上传到服务器</el-button>
            </el-upload>
            </template>
          </el-form-item>
        </el-form>
        <el-button :loading="loading" @click="submitForm" type="primary">提交</el-button>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import {deleteHotelImage, getHotelInfo, updateHotelInfo} from "@/api/multimedia";
import {baseURLMulti} from "@/setting";

export default {
  name: "edit",
  props:['hotelId'],
  data(){
    return{
      supportUpLoad:true,
      urlUpload:baseURLMulti,
      loading:false,
      imageList:[],
      hotelInfo:{
        hotelName:'',
        hotelDescription:'',
        imageList:[],
      },
      rules:{
        hotelName:[{required:true,message: '旅馆名称不能为空', trigger: 'blur'}],
        hotelDescription:[{required:true,message: '旅馆描述不能为空', trigger: 'blur'}]
      },
    }
  },
  mounted() {
    this.getHotel()
  },
  methods:{
    getHotel(){
      getHotelInfo(this.hotelId).then(response=>{
        const {hotelInfo}=response.data
        console.log(hotelInfo.hotelImage)
        this.hotelInfo.hotelName=hotelInfo.hotelName
        this.hotelInfo.hotelDescription=hotelInfo.hotelDescription
        if (hotelInfo.hotelImage!==''){
          if (this.hotelInfo.imageList.length>0)
            this.hotelInfo.imageList.shift()
          this.hotelInfo.imageList.push(hotelInfo.hotelImage)
        }
      })
    },
    deleteImage(){
      deleteHotelImage(this.hotelId).then(()=>{
        this.hotelInfo.imageList.shift()
      })
    },
    submitForm(){
      this.$refs.hotelInfo.validate((valid) =>{
        if (valid){
          if (this.hotelInfo.imageList.length<1){
            this.$message({
              type:'error',
              message:'请先将旅馆配图上传至服务器'
            })
            return
          }
          //文本
          const form={
            hotelId:this.hotelId,
            hotelName:this.hotelInfo.hotelName,
            hotelDescription:this.hotelInfo.hotelDescription,
            hotelImage:this.hotelInfo.imageList[0]
          }
          this.loading=true
         updateHotelInfo(form).then(()=>{
           this.loading=false
           this.imageList=[]
           this.getHotel()
         }).catch(()=>{
           this.loading=false
         })
        }else {
          this.loading=false
        }
      })
    },
    change(file,fileList){
      if (fileList.length>1 ||this.hotelInfo.imageList.length>0){
        this.supportUpLoad=false
      }
    },
    //图片上传之前调用
    beforeUpload(file){
      if(!this.supportUpLoad){
        this.$message({
          type:'warning',
          message:'只能有一张配图'
        })
        return false
      }
      const isJPG = file.type === 'image/jpeg'||file.type === 'image/jpg' ||file.type==='image/png'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isJPG||!isLt2M) {
        this.$message({
          type:'warning',
          message:'上传头像图片只能是 jpg、jpeg 格式,并且上传头像图片大小不能超过 1MB!'
        })
        return false
      }
      return true
    },
    //图片上传成功
    submitSuccess(response, file, fileList){
      this.hotelInfo.imageList.push(response.data.imageUrl)
    },
    //图片上传失败
    errorUpload(){
      this.$message({
        type:'error',
        message:'图片上传失败，请检查网络后重试'
      })
    },
    //图片上传方法
    submitUpload(){
      this.$refs.upload.submit()
    },

    //图片数量超出限制
    exceed(){
      this.$message({
        type:'warning',
        message:'只能上传1张图片'
      })
    },
  }
}
</script>

<style scoped>

</style>
